<template>
  <div>
    <el-card>
      <div slot="header" class="clearfix">
        <span class="title">通讯录</span>
        <span style="float: right">查看全部</span>
      </div>
      <el-input
        placeholder="请输入内容"
        v-model="searchValue"
        class="input-with-select"
      >
        <el-button slot="append" type="primary">查找</el-button>
      </el-input>
    </el-card>
    <el-card style="margin-top: 20px; height: 275px">
      <div slot="header" class="clearfix">
        <span class="title">常用功能</span>
      </div>
      <div class="itemBox">
        <div v-for="item in itemList" class="item">
          <div>
            <svg-icon
              :className="'class-icon ' + 's' + item.color"
              :icon-class="item.icon"
              @click="click"
            />
          </div>
          <div class="label">{{ item.label }}</div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      itemList: [
        {
          label: "设备采购",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "文件领用",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "物资领用",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "设备进出库",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "我要报销",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "合同起草",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "阈值提醒",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "我的审批",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "任务派发",
          icon: "sbcg",
          color: "4892FE",
        },
        {
          label: "车检提醒",
          icon: "sbcg",
          color: "4892FE",
        },
      ],
      activeName: "first",
      searchValue: "",
    };
  },
};
</script>
<style lang="scss" scoped>
.label {
  margin: 15px 0;
}
.class-icon {
  font-size: 45px;
}
.s4892fe {
  color: #4892fe;
}
.itemBox {
  display: flex;
  flex-wrap: wrap;
  .item {
    text-align: center;
    width: 20%;
    font-size: 14px;
  }
}
.title {
  font-weight: 500;
}
::v-deep.el-button--primary {
  color: #ffffff !important;
  background-color: #1890ff !important;
  border-color: #1890ff !important;
  border-radius: 0;
  border: 0 !important;
}
</style>
